
<script language="javascript">
var current="#abc1";
function show(id)
{ 
	if(id != current){
	document.getElementById(id).className="tabber";
	document.getElementById(current).className = "hidden";
	current=id;}
}

</script>

<style>
.hidden{display:none;}

.tabber{
	position:auto;
	padding:0; 
	border-top:1px solid black;
	border-bottom:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black; 
	width:400px; 
	height:200px; 
	backgound-color:grey;
	display:none;
	
	z-index:1;
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 5px 5px 0 0;

}
.tabber1{
	position:auto;
	padding:0; 
	border-top:1px solid black;
	border-bottom:1px solid black;
	border-left:1px solid black;
	border-right:1px solid black; 
	width:400px; 
	height:200px; 
	backgound-color:grey;
	display:none;
}
.tabs a{border-bottom: 0px solid #666; padding: 0 5px 0 5px; color: #666; 
	font-size: 1.1em;
	text-decoration: none;
	margin:5px 3px 5px 0;
	background-color:gray;	
	border-top:1px solid green;
	border-left:1px solid green;
	border-right:1px solid green; 
	z-index:4;
	 border-radius: 3px 3px 0 0;
}
.tabs {padding: 0px; color: #666; 
	font-size: 1.1em;
	text-decoration: none;
	margin:0;
	
	
	
	
}
</style>

 <style>
.box,
button { float:left; margin:5px 10px 5px 0; }
.box { height:80px; width:80px; background:#090; }
#log { clear:left; }

</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="tabs">

<a href="#" id="1">one    </a></span><span><a href="#" id="2">    two</a><a href="#" id="3">      three</a>

</div>
<div class="tabber" id="abc1">
<table class="tableCss">
		<tr>

			<td class="fieldLabelLeft">Property Type</td>
			<td class="fieldLabelLeft">Price Range</td>
			<td class="fieldLabelLeft">Bedroom</td>
			<td class="fieldLabelLeft">City</td>

			<td class="searchLabel"></td>

		</tr>
		<tr>

			<td class="fieldLabelLeft"><select class="selectField">
				<option>Property Type</option>
			</select></td>
			<td class="fieldLabelLeft"><select class="selectField">
				<option>Price Range</option>
			</select></td>
			<td class="fieldLabelLeft"><select class="selectField">
				<option>Bedroom</option>
			</select></td>
			<td class="fieldLabelLeft"><select class="selectField">
				<option>Maharashtra</option>
			</select></td>


			<td class=""><a href="<s:url action="searchResultLink"/>">Search</a><br></td>
		</tr>
		<tr>
			<td colspan="8">
			<table border="0px" cellpadding="0" cellspacing="0">
				<tr>
					<td class="fieldLabelLeft">Property To :</td>
					<td class="fieldLabelLeft"><input type="radio" /><b>Buy</b></td>
					<td class="fieldLabelLeft"><input type="radio" />Rent</td>
					<td class="fieldLabelLeft" valign="middle">| Posted By : <input
						type="CHECKBOX" /> Dealer</td>
					<td class="fieldLabelLeft"><input type="CHECKBOX" />Owner</td>
					<td class="searchLabel"></td>
				</tr>
			</table>
			</td>
		</tr>
	</table>
</div>
<div class="tabber" id="abc2">
tabber two
</div>
<div class="tabber" id="abc3">
tabber theere
</div>

<script>

$(function() {
   $(current).css("display","block");
});

$("a").click(function () {
		
		var active="#abc"+this.id;
		if(current !=active){
		$(current).css("display","none");
		//$(current).fadeOut();
		$(active).css("display","");
		$(active).fadeIn(500);
		current=active;}
        return false;
        }); 
</script>
